<template>
  <div>
    <ContentTitle :info="ctInfo" />
    <div class="block mt-10 bg-fff">
      <div class=" flex ">
        <span class="demonstration f14 flex aic ml-10 mr-10">月份选择:</span>
        <el-date-picker
          v-model="value"
          @change="changeday"
          type="month"
          placeholder="选择月"
        >
        </el-date-picker>
        <download-excel
          :data="list"
          :fields="tableTitle"
          type="xlsx"
          worksheet="My Worksheet"
          name="使用记录.xlsx"
          class="ml-10"
        >
          <el-button type="primary" >导出数据 </el-button>
        </download-excel>
      </div>

      <div class="SearchResultTab">
        <el-table :data="list" style="width: 100%">
          <el-table-column type="index" label="序号"> </el-table-column>

          <el-table-column prop="id" label="充值id"> </el-table-column>

          <el-table-column prop="cTime" label="日期" :formatter="formatdata4">
          </el-table-column>

          <el-table-column prop="amount" label="充值金额"> </el-table-column>

          <el-table-column prop="desc" label="备注"> </el-table-column>
        </el-table>
      </div>

      <div class="fenye">
        <el-pagination
          background
          :current-page="currPage"
          @current-change="changePage"
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import ContentTitle from "@/components/ContentTitle.vue";
import { $feeusageList } from "@/api/index";
export default {
  components: { ContentTitle },
  data() {
    return {
      ctInfo: {
        type: "计费",
        text: "使用记录",
        msg: " - 统计当前账户每天消耗的消息额度总数，可查看历史月份的使用记录。",
      },
      cTime: "",
      id: 0,
      cTime: 0,
      amount: 0,
      desc: "",
      currPage: 1,
      pageSize: 0,
      list: [],
      total: 0,
      value: "",
      timer: "",
      tableTitle: {
        编号: "id",
        类型: "cTime",
        金额: "amount",
        备注: "desc",
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    changeday(value) {
      let date = new Date(value * 1);
      this.timer = this.formatdata5(date);
      this.getList();
    },
    changePage(page) {
      this.currPage = page;
      this.getList();
    },
    getList() {
      let params = {
        currPage: this.currPage,
        date: this.timer,
      };
      $feeusageList(params).then((res) => {
        this.total = res.total;
        this.pageSize = res.pageSize;
        this.list = res.data;
      });
    },
  },
};
</script>
<style >
.fenye {
  padding-left: 35%;
}
.SearchResultTab {
  margin-top: 20px;
}
</style>

